<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.searchKey"
        placeholder="项目名称"
        style="width: 200px"
        class="filter-item"
      />
      <el-select
        v-model="listQuery.sortKey"
        style="width: 140px"
        class="filter-item"
      >
        <el-option
          v-for="item in sortOptions"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="searchAndSort"
      >
        查找
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="序列号"
        prop="id"
        sortable="custom"
        align="center"
        width="100"
        :class-name="getSortClass('idNumber')"
      >
        <template slot-scope="{ row }">
          <span>{{ row.idNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目编号" min-width="50px" align="center">
        <template slot-scope="{ row }">
          <span class="link-type">{{ row.projectId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" min-width="50px" align="center">
        <template slot-scope="{ row }">
          <span class="link-type">{{ row.projectName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目负责人" min-width="50px" align="center">
        <template slot-scope="{ row }">
          <span class="link-type">{{ row.projectOwnerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属部门" min-width="50px" align="center">
        <template slot-scope="{ row }">
          <span class="link-type">{{ row.projectDepartment }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人电话" min-width="50px" align="center">
        <template slot-scope="{ row }">
          <span class="link-type">{{ row.projectOwnerPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            size="mini"
            type="success"
            @click="$router.push(`/project/mid/check/${row.id}`)"
            :disabled="
              !(
                checkPermission([
                  '项目审批：中检',
                ]) && row.enableMid
              )
            "
          >
            中审
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="$router.push(`/project/final/check/${row.id}`)"
            :disabled="
              !(
                checkPermission([
                  '项目审批：结项',
                ]) && row.enableFinal
              )
            "
          >
            结项
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { findAll } from "@/utils";
import Pagination from "@/components/Pagination";
import { checkPermission } from "@/utils/permission";
import { mapGetters } from "vuex";

export default {
  name: "projectCheckList",
  components: { Pagination },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      tableKey: 0,
      totalList: null,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageIndex: 1,
        limit: 10,
        searchField: "projectName",
        searchKey: "",
        sortField: "idNumber",
        sortKey: "asce",
      },
      sortOptions: [
        { label: "序列号 升序", key: "asce" },
        { label: "序列号 降序", key: "desc" },
      ],
    };
  },
  computed: {
    ...mapGetters(["notifications"]),
  },
  created() {
    this.getList();
  },

  filters: {
    convertUTCToGMTString(val) {
      if (!val) return "";
      const currentDate = new Date(val);
      const month =
        currentDate.getMonth() < 9
          ? `0${currentDate.getMonth() + 1}`
          : (currentDate.getMonth() + 1).toString();
      return `${currentDate.getFullYear()}-${month}-${currentDate.getDate()}`;
    },
  },
  methods: {
    checkPermission,
    getList() {
      this.totalList = this.notifications.map((item, index) => {
          item.idNumber = index + 1;
          return item;
        });
      this.handleFilter();
      this.listLoading = false;
    },
    handleFilter() {
      const result = findAll(this.totalList, this.listQuery);
      this.list = result.data;
      this.total = result.total;
    },
    searchAndSort() {
      this.listQuery.pageIndex = 1;
      this.handleFilter();
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sortKey = "asce";
      } else {
        this.listQuery.sortKey = "desc";
      }
      this.listQuery.pageIndex = 1;
      this.handleFilter();
    },
    getSortClass: function (key) {
      const sort = this.listQuery.sortKey;
      return sort === `asce` ? "ascending" : "descending";
    },
  },
};
</script>

<style scoped>
.home {
  min-height: 770px;
}

.padgination-home {
  .swiper-pagination-bullet {
    opacity: 1;
  }
}

.swiper-book {
  line-height: 25px;
}

.padgination-book {
  position: relative;
  top: 83%;

  .swiper-pagination-bullet {
    opacity: 1;

  }
}



.nav-icos {

  .nav-item {
    width: 95px;
    margin: 5px;

    .text {
      width: 100%;
      font-size: 14px;
      text-align: center;
    }
  }
}

.items {
  min-height: 350px;

  .server-items{
    .server-item{
      display: block;
      text-align: center;
      border-radius: 10%;
    }
  }
  .iconfont{
    &.icon-fuwu{
      width: 64px ;
    }
  }
}

.top-nav {
  .iconfont {
    margin: 6px auto;
  }
}

.nav-items {
  max-height: 100%;
  .title {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

</style>
